<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
    @font-face {
        font-family: 'YSBangBang';
        src: url('/Public/game/fonts/YSBangBang.ttf') format('truetype');
    }
    html, body{
        height: 100%; width: 100%; padding: 0;
    }
    body{
        background: url('/Public/game/images/back.jpg') center no-repeat; background-size: cover;
        font-family: 'YSBangBang';color: white;
    }
    #main {
        display: flex; flex-direction: column; align-items: center;justify-content: center; height: 100%;overflow: hidden;
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none; /* IE 10 and IE 11 */
        user-select: none; /* Standard syntax */
    }
    h1 {
        font-size: 4rem;font-weight: normal;text-align: center; padding-bottom: 2vh;
    }
    h2 {
        font-size: 2.5rem;font-weight: normal;text-align: center; padding-bottom: 10vh;
    }
    h3{
        font-size: 2rem;font-weight: normal;text-align: center; padding-bottom: 2vh;
    }
    #image{
        width: 1584px;height: 864px; overflow: hidden;
    }
    .image-item{
        width: 1980px;height:1080px; background-size:100%;background-position: center; background-repeat: no-repeat;
        position: relative;transform: scale(0.8); transform-origin: top left;
    }
    .diff{
        position: absolute; width: 100px; height:100px; border:8px solid red; border-radius:50%;
        transform:translate(-50%,-50%);
    }
    button{
       background: url('/Public/game/images/btn_start.png') center no-repeat;background-size: 100% 100%; 
       padding:0.4rem 1.2rem 1rem; font-size: 2rem;color: white;border: none; cursor:pointer;margin-top:10vh;
       
    }
    button:hover{
        color:white;
    }
    button:active{
        transform: scale(0.9); 
    }
</style>
<body>
    <div id="main">
        <div id="title">
            <h1>【找茬任务】</h1>
            <h2>找出图片中不一样的图案并点击，两分钟内成功找完5张图片中的不同即可获得线索</h2>
        </div>
        <div id="result">
            <h3></h3>
        </div>
        <div id="game">
            <h3>
                倒计时：<span id="time">120</span>秒<br/>
            </h3>
            <div id="image">
                <volist name="image_list" id="vo" key="index">
                    <div id="{$index}" class="image-item" style="background-image: url('/Public/game/images/tv/{$vo.id}.png'); display: none;">
                        <div data-id="{$index}" class="diff" style="top:{$vo.y}px;left:{$vo.x}px;"></div>
                    </div>
                </volist>
            </div>
        </div>

        <div class="btn">
            <button id="start" onclick="gameStart()">开始游戏</button>
            <button id="restart" onclick="parent.location.reload()">再来一局</button>
        </div>
        
    </div>
</body>
<script>
function getUrlParams(url) {
    const searchParams = new URLSearchParams(url.split('?')[1]);
    const params = {};
    for (const [key, value] of searchParams.entries()) {
        params[key] = value;
    }
    return params;
}
let params = getUrlParams(window.location.href);
let interval
let intervalStatus = false;
console.log(params);

$(".diff").click(function(){
    $(this).css('opacity',1);
    let id = $(this).attr('data-id');
    console.log(id);
    setTimeout(()=>{
        if(id == 5){
            gameResult('win')
            return;
        }
        $("#" + id).fadeOut();
        let next = parseInt(id) + 1;
        console.log(next);
        $("#" + next).fadeIn();
    },500)
    
})

function gameInit(){
    $("#result").hide()
    $("#game").hide()
    $("#restart").hide()
    $("#title").show()
    $("#time").text("120")
    $(".diff").css("opacity",0)
    clearInterval(interval)
    intervalStatus = false;
}

function gameStart(){
    gameInit();
    $("#game").show();
    $("#start").hide();
    $("#title").hide()
    let targetTime = new Date().getTime() + 120000;
    interval = setInterval(function(){
        let now = new Date().getTime();
        if(now >= targetTime){
            gameResult('lose')
            return; 
        }
        let time = Math.round((targetTime - now) / 1000);
        $("#time").text(time);
    }, 100)
    intervalStatus = true;
    $("#1").show();

}
function gameResult(res){
    console.log(res);
    clearInterval(interval);
    intervalStatus = false
    $("#game").hide();
    $("#result").show();
    $("#restart").show()
    if(res == 'win'){
        $("#result h3").text("恭喜通关！")
        $.ajax({
            url:'/Home/Trial/set_game_success?id=' + params.id,
        })
    }else{
        $("#result h3").text("游戏失败！")
    }
}
gameInit();
</script>
</html>